<template>
  <div>
    <div class="title-container">
      <span class="roleTitle">角色名称：</span>
      <el-input disabled :value="$route.query.roleName" style />
    </div>
    <!-- show-checkbox: 节点是否可被选择
        default-expand-all: 是否默认展开所有节点
        highlight-current: 是否高亮当前选中节点，默认值是 false。
        node-key: 设置id
    -->
    <el-tree
      ref="tree"
      :data="allPermissionsData"
      show-checkbox
      default-expand-all
      node-key="id"
      highlight-current
      :props="defaultProps"
    />
    <el-button :loading="loading" type="primary" @click="save">保存</el-button>
    <el-button @click="cancel">取消</el-button>
  </div>
</template>
<script>
export default {
  name: 'PermissionRoleAuth',
  data() {
    return {
      loading: false, // 用来标识是否正在保存请求中的标识, 防止重复提交
      // 所有权限数组
      allPermissionsData: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  created() {
    // this.init()
    this.getPermissions()
  },
  methods: {
    // 初始化
    // init() {
    //   this.getPermissions()
    // },
    // 获取指定角色的权限列表 reqGetToAssign
    async getPermissions() {
      const roleId = this.$route.params.id
      console.log(1112, roleId)
      const result = await this.$API.permission1.reqGetToAssign(roleId)
      console.log('result', result)
      if (result.code === 20000) {
        this.allPermissionsData = result.data.children
        const checkedIds = this.getCheckedIds(this.allPermissionsData)
        console.log('checkedIds', checkedIds, this.$refs.tree)
        this.$refs.tree.setCheckedKeys(checkedIds)
        // console.log('getPermissions() checkedIds', checkedIds)
      }
    },
    // 得到所有选中的id列表
    getCheckedIds(auths, initArr = []) {
      // console.log('auths', auths)
      return auths.reduce((pre, item) => {
        // console.log('kkkk', pre, item)
        if (item.select && item.level === 4) {
          pre.push(item.id)
        } else if (item.children) {
          this.getCheckedIds(item.children, initArr)
        }
        return pre
      }, initArr)
    },
    // 保存
    async save() {
      //
      const ids = this.$refs.tree.getCheckedKeys().join(',')
      // console.log('ii', ids)
      this.loading = true
      const result = await this.$API.permission1.doAssign(this.$route.params.id, ids)
      this.loading = false
      console.log('result1', result)
      if (result.code === 20000) {
        this.$message.success(result.message || '分配权限成功')
        // 必须在跳转前获取(跳转后通过this获取不到正确的数据了)
        const roleName = this.$route.query.roleName
        const roles = this.$store.getters.roles
        console.log('uuu', roleName, roles)
        this.$router.replace('/permission/role/index', () => {
          console.log('replace onComplete')
          // 跳转成功后, 判断如果更新的是当前用户对应角色的权限, 重新加载页面以获得最新的数据
          if (roles.includes(roleName)) {
            window.location.reload()
          }
        })
      }
    },
    // 取消
    cancel() {
      this.$router.replace({ name: 'Role' })
    }
  }
}
</script>
<style lang="scss" scoped>
.title-container {
  width: 100%;
  display: flex;
}
.roleTitle {
  width: 9%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
